{include file="common/header"/}

<body class="bg-light">
	<div class="container">
		<div class="col-md-8">
			<div class="card my-4">
				<div class="card-body">
					<h5 class="card-title">个人设置</h5>
					<hr>
					<div id="upload_avator_model" class="modal" tabindex="-1" role="dialog">
						<div class="modal-dialog modal-lg" role="document">
			    			<div class="modal-content">
			    				<p id="accept_param"></p>
			    				<div class="modal-header">
			    					<h5>上传图片</h5>
							        <p data-dismiss="modal" aria-label="Close"><i class="fa fa-close"></i></p>
			    				</div>
			    				<div class="modal-body">
			    					<div class="container-fluid">
				    					<div class="custom-file">
										    <input type="file" class="custom-file-input" id="choose_avator_image" accept="image/png, image/jpeg">
										    <label id="avator_image_name" class="custom-file-label" for="choose_avator_image">选择文件</label>
										</div>
										<div class="row mt-3">
											<div class="col-md-8">
												<img id="avator_image">
											</div>
											<div class="col-md-2 mx-auto my-auto">
												<p>图片预览：</p>
												<div class="avator_image_preview"></div>
											</div>
										</div>
									</div>
			    				</div>
			    				<div class="modal-footer">
			    					<button id="upload_button" type="button" class="btn btn-primary">确认上传</button>
			    				</div>
			    			</div>
			    		</div>
					</div>
					<div class="radio my-3">
						{foreach $boy_avator_list as $boy}
						<label class="radio-inline">
							<img src="__AVATOR__{$boy}" class="img-circle center-block">
							<input type="radio" name="avator" value="{$boy}">
						</label>
						{/foreach}
						{foreach $girl_avator_list as $girl}
						<label class="radio-inline">
							<img src="__AVATOR__{$girl}" class="img-circle center-block">
					    	<input type="radio" name="avator" value="{$girl}">						    	
						</label>
						{/foreach}
					</div>
					<button id="set_avator" class="btn btn-primary btn-sm">修改头像</button>
					<button id="upload_avator" class="btn btn-outline-primary btn-sm">上传头像</button>
			        <hr>
			        <form action="/index/setting/setIntroduction" id="introduction_form" method="post">
			          <div class="form-group">
			            <label>个人简介：</label>
			            <input type="text" name="introduction" id="setting_introduction" class="form-control">
			            <div id="setting_introduction_feedback" class="invalid-feedback"><small></small></div>
				      </div>
			          <div class="form-group">
			            <button type="submit" class="btn btn-primary btn-sm">确认修改</button>
			          </div>
			        </form>
				</div>
			</div>
			<div class="card my-4">
				<div class="card-body">
					<h5 class="card-title">修改密码</h5>
					<hr>
					<form id="password_form">
						<div class="form-group">
				            <input type="password" id="setting_opassword" class="form-control" placeholder="原密码">
				            <div id="setting_opassword_feedback" class="invalid-feedback"><small></small></div>
				        </div>
						<div class="form-group">
				            <input type="password" id="setting_npassword" class="form-control" placeholder="新密码">
				            <div id="setting_npassword_feedback" class="invalid-feedback"><small></small></div>
				        </div>
				        <div class="form-group">
				            <input type="password" id="setting_rpassword" class="form-control" placeholder="确认密码">
				            <div id="setting_rpassword_feedback" class="invalid-feedback"><small></small></div>
				        </div>
				        <div class="form-group">
				            <button type="submit" class="btn btn-primary btn-sm">确认修改</button>
				        </div>
				    </form>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(function () {
		/*修改头像*/
		var avator_type = null;
		$('#avator_image').cropper({
	        aspectRatio: 1,
	        viewMode: 1,
	        guides: false,
	        preview: '.avator_image_preview',
	        cropBoxResizable: false,
	        dragMode: 'move',
	        ready:function () {
	        	$('#avator_image').cropper('setCanvasData',{
		    		height: 200,
		    		width: 200
		    	});
	        	$('#avator_image').cropper('setCropBoxData', {
		    		height: 132,
		    		width: 132
		    	});
	        }
		});
		
		// 选择图片并在下方展示
		$('#choose_avator_image').change(function(event) { 
			var files = event.target.files;
			if (files && files.length > 0) {
				var file = files[0];
				avator_type = file.type;
				$('#avator_image_name').html(file.name);
	      		var reader = new FileReader();
			    reader.readAsDataURL(file);
			    reader.onload = function() {
			    	$('#avator_image').cropper('replace', reader.result);
			    }
			}
		});

		// 打开模态框
		$('#upload_avator').click(function() {
			$('#upload_avator_model').modal('show');
		});

		// 上传文件
		$('#upload_button').click(function() {
			var canvas = $('#avator_image').cropper('getCroppedCanvas');
			var avator_data = canvas.toDataURL(avator_type);
			$.post("/index/setting/setAvatorCustomize", {
				'avator': avator_data
			},
			function(result) {
				if (result.status == 'success') {
					toastr.success(result.message);
					setTimeout(function(){
						location.reload();
					}, 1000);
      			}
				if (result.status == 'error') {
      				toastr.error(result.message);
      			}
			}, "json");
		});

		$('#set_avator').click(function() {
			var avator = $("input[name='avator']:checked").val();

			if (avator != null) {
				$.post("/index/setting/setAvatorDefault", {
					'avator': avator
				},
				function(result) {
					if (result.status == 'success') {
						toastr.success(result.message);
						setTimeout(function(){
							location.reload();
						}, 1000);
	      			}
					if (result.status == 'error') {
	      				toastr.error(result.message);
	      			}
				}, "json");
			}
			else {
				toastr.warning("请先选中头像！");
			}			
		});


		/*修改密码*/
		$('#setting_opassword').blur(check_opassword);
		function check_opassword() {
			var opassword_value = $('#setting_opassword').val();
			if(opassword_value == '') {
				$('#setting_opassword_feedback').html('旧密码不能为空');
				$('#setting_opassword').addClass('is-invalid');
				return false;
			}
			else {
				$('#setting_opassword').removeClass('is-invalid');
				$('#setting_opassword').addClass('is-valid');
				return true;
			}
		}

		$('#setting_npassword').blur(check_npassword);
		function check_npassword() {
			var npassword_value = $('#setting_npassword').val();
			var password_regular = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{4,20}$/;
			var verify = password_regular.test(npassword_value);
			if(npassword_value == '') {
				$('#setting_npassword_feedback').html('新密码不能为空');
				$('#setting_npassword').addClass('is-invalid');
				return false;
			}
			else if (!verify) {
				$('#setting_npassword_feedback').html('密码至少包含字母和数字，可以有符号，长度为4-20个字符');
				$('#setting_npassword').addClass('is-invalid');
				return false;
			}
			else {
				$('#setting_npassword').removeClass('is-invalid');
				$('#setting_npassword').addClass('is-valid');
				return true;
			}
		}

		$('#setting_rpassword').blur(check_rpassword);
		function check_rpassword() {
			var rpassword_value = $('#setting_rpassword').val();
			var npassword_value = $('#setting_npassword').val();
			if(rpassword_value == '') {
				$('#setting_rpassword_feedback').html('请再次输入密码');
				$('#setting_rpassword').addClass('is-invalid');
				return false;
			}
			else if (npassword_value != rpassword_value) {
				$('#setting_rpassword_feedback').html('两次密码输入必须相同');
				$('#setting_rpassword').addClass('is-invalid');
				return false;
			}
			else {
				$('#setting_rpassword').removeClass('is-invalid');
				$('#setting_rpassword').addClass('is-valid');
				return true;
			}
		}


		$("#introduction_form").submit(function(event){
			event.preventDefault();
			var introduction_value = $('#setting_introduction').val();
			if (introduction_value == '') {
				$('#setting_introduction_feedback').html('用户名不能为空');
				$('#setting_introduction').addClass('is-invalid');
			}
			else if (introduction_value.length > 35) {
				$('#setting_introduction_feedback').html('个人简介长度不能超过35');
				$('#setting_introduction').addClass('is-invalid');
			}
			else {
				$('#setting_introduction').removeClass('is-invalid');
				$('#setting_introduction').addClass('is-valid');
				$.post("/index/setting/setIntroduction", {
					'introduction': introduction_value
				},
				function(result) {
					if (result.status == 'success') {
						toastr.success(result.message);
						setTimeout(function(){
							location.reload();
						}, 1000);
	      			}
					if (result.status == 'error') {
	      				toastr.error(result.message);
	      			}
				}, "json");
			}
		});

		$("#password_form").submit(function(event){
			event.preventDefault();
			var is_opassword_valid = check_opassword();
    		var is_npassword_valid = check_npassword();
    		var is_rpassword_valid = check_rpassword();
			if (is_opassword_valid && is_npassword_valid && is_rpassword_valid) {
				var opassword_value = $('#setting_opassword').val();
				var npassword_value = $('#setting_npassword').val();
				$.post("/index/setting/setPassword", {
					'opassword': opassword_value,
					'npassword': npassword_value
				},
				function(result) {
					if (result.status == 'success') {
	      				toastr.success(result.message);
	      				setTimeout(function(){
	      					location.reload();
						}, 1000);
	      			}
	      			if (result.status == 'error') {
	      				toastr.error(result.message);
	      			}	   
				}, "json");
			}		
		});
	});
</script>